<template>
  <div class="containerCSS">
    <div v-if="showDetailPage =='listPage'"
    class="app-container">
      <div class="app-container-title">管理相对人信息管理</div>
      <el-form class="app-container-query" :model="queryParams" size="small" :inline="true">
        <el-form-item label="企业名称">
          <el-input placeholder="请输入企业名称查询" v-model="queryParams.enterpriseName" clearable @keyup.enter.native="getList"></el-input>
        </el-form-item>
        <el-form-item label="统一信用代码/登记号查询">
          <el-input placeholder="请输入统一信用代码/登记号查询" v-model="queryParams.creditCode" clearable @keyup.enter.native="getList"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryParams.type" clearable>
            <el-option v-for="item in dict.type.enterprise_info_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="queryParams.category" clearable filterable>
            <el-option v-for="item in commonOptionsCategory.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="镇/街道">
          <el-select v-model="queryParams.data5" clearable filterable>
            <el-option v-for="item in commonOptionsStreet.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入详细地址" v-model="queryParams.addr" clearable @keyup.enter.native="getList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-table border header-cell-class-name="bg-F4F8FF"
      :data="tableData"
      max-height="580"
      v-loading="loading">
        <el-table-column align="center" label="名称" prop="enterpriseName" min-width="250"></el-table-column>
        <el-table-column align="center" label="统一信用代码/登记号" prop="creditCode" min-width="250"></el-table-column>
        <el-table-column align="center" label="类型" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.enterprise_info_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="类别" prop="category">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.enterprise_category" :value="scope.row.category"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所在镇/街道" prop="town"></el-table-column>
        <el-table-column align="center" label="详细地址" prop="addr"></el-table-column>
        <el-table-column align="center" label="联系电话" prop="contactNumber"></el-table-column>

        <el-table-column align="center" label="企业信息审核状态" prop="reviewStatus">
          <template #default="scope">
            {{ reviewStatusMap[scope.row.reviewStatus] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="认证状态" prop="approvalStatus">
          <template #default="scope">
            {{ approvalStatusMap[scope.row.approvalStatus] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请账号" prop="applyNo"></el-table-column>
        <el-table-column align="center" label="操作" width="150" fixed="right">
          <template #default="scope">
            <!-- <el-button type="text">编辑</el-button>
            <el-button type="text" @click="deleteClickBtn(scope.row)">删除</el-button> -->
            <el-button type="text" v-if="scope.row.reviewStatus == 0" @click="goEnterpriseInfoPageClickBtn(scope.row)">审核企业信息</el-button>
            <el-button type="text" v-if="scope.row.approvalStatus == 0" @click="goDetailPageClickBtn(scope.row, 'approve')">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:10px;text-align: right;"
        background
        :pageSize="queryParams.pageSize"
        :current-page="queryParams.pageNum"
        layout="sizes, prev, pager, next"
        :page-sizes="[10, 20, 50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <Detail
    v-if="showDetailPage == 'detailPage'"
    ref="detailRef"
    :detailPageType="detailPageType"
    :currentRow="currentRow"
    @detailPageGoBack="detailPageGoBack"/>
    <EnterpriseInfo
      v-if="showDetailPage == 'enterpriseInfoPage'"
      :currentRow="currentRow"
      @detailPageGoBack="detailPageGoBack"/>
  </div>
</template>

<script>
import { certificateListApi,managerQueryList } from '@/api/zhangping/certificate'
import Detail from './detail/index.vue'
import  EnterpriseInfo from './enterpriseInfo/index.vue'
import { getCurrentDay } from '@/utils/business.js'
import { mapState } from "vuex";
export default {
  dicts: ['enterprise_info_type','enterprise_category'],
  props:{
    cmpFrom:{
      type: String,
      default:()=> 'second'
    },
  },
  components:{ Detail, EnterpriseInfo },
  data() {
    return {
      total:1000,
      tableData:[],
      approvalStatusMap:{0:'待审核',1:'审核通过',2:'审核失败',null:'未提交认证'},//string 审核状态 0 待审核, 1 审核通过 2 审核失败
      reviewStatusMap:{'0':'待审核','1':'审核通过','2':'审核失败'},//string 审核状态 0 待审核, 1 审核通过 2 审核失败
      queryParams: {
        pageNum:1,
        pageSize:10,
        enterpriseName:null,
        creditCode:null,
        type:null,
        category:null,
        data5:null,
        data6:null,
      },
      data3Option:[{label:'从业人员',value:1},{label:'非从业人员',value:2}],
      showDetailPage:'listPage',
      currentRow:{},
      loading:false,
    }
  },
  computed: {
    ...mapState('common', ['allDicts','commonOptionsCategory','commonOptionsStreet'])
  },
  mounted(){
    console.log(this.dict,'@#@#@');
    this.getList()
    // this.getManagerList()
  },
  methods: {
    deleteClickBtn(row){
      this.$modal.confirm('是否确认删除名称为"' + row.enterpriseName + '"的数据项？').then(function() {
        // return delInfoApi(row.id);
      }).then(() => {
        // this.getList();
        // this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    goEnterpriseInfoPageClickBtn(row){
      this.currentRow = row
      this.showDetailPage = 'enterpriseInfoPage'
    },
    goDetailPageClickBtn(row, pageType){
      this.currentRow = row
      this.detailPageType = pageType
      this.showDetailPage = 'detailPage'
      setTimeout(() => {
      if( !this.$refs.detailRef.detailPageStatusMap[pageType] ){
        this.$modal.msg("未开发");
        this.showDetailPage = false
        return
      }
        this.$refs.detailRef.init(row)
      }, 1);
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getList()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getList()
    },
    async getList(){
      this.loading = true
      const { code, rows, total} = await managerQueryList(this.queryParams)
      if( code === 200 ){
        this.tableData = rows
        this.total = total
      }
      this.loading = false
    },
    /*async getManagerList(){
      this.loading = true
      const { code, rows, total} = await managerQueryList(this.queryParams)
      if( code === 200 ){
        this.tableData = rows
        this.total = total
      }
      this.loading = false
    },*/
    detailPageGoBack(){
      this.showDetailPage = 'listPage'
      this.getList()
    },
    resetQuery() {
      for(let key in this.queryParams){
        this.queryParams[key] = null
      }
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">
.containerCSS{
  background-color: #fff;
  height: calc( 100vh - 108px);
  border-radius: 10px;
  .app-container{
    .app-container-title{
      font-size: 16px;
      color: #484848;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &:before{
        content:'';
        display: block;
        width: 4px;
        height: 12px;
        background-color: #5D85FF;
        border-radius: 6px;
        margin-right: 6px;
      }
    }
    .app-container-query{
      margin-bottom: -18px;
    }
    .mb18{
      margin-bottom: 18px;
      display: flex;
      column-gap: 12px;
    }
  }
}
</style>
